import React, { Component } from 'react';
import { AppRegistry, StatusBar, View } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

import HomeScreen from './pages/home';
import DetailScreen from './pages/detail';
import SearchScreen from './pages/search';
import ProfileScreen from './pages/profile';
import CollectionScreen from './pages/collection';
import AdvertisingScreen from './pages/advertising';
import FeedbackScreen from './pages/feedback';
import SystemScreen from './pages/system';
import ProtocolScreen from './pages/protocol';
import SourceScreen from './pages/source';

const MainScreenNavigator = TabNavigator({
  Home: {
    screen: HomeScreen,
  },
  Profile: {
    screen: ProfileScreen,
  },
}, {
  initialRouteName: 'Home',
  tabBarPosition: 'bottom',
  animationEnabled: false,
  tabBarOptions: {
    activeTintColor: '#ed4040',
    showIcon: true,
    labelStyle: {
      color: '#666',
    },
    style: {
      backgroundColor: '#f7f7f7',
    },
  },
});

const SimpleApp = StackNavigator({
  Homes: {
    screen: MainScreenNavigator,
  },
  Detail: {
    screen: DetailScreen,
  },
  Search: {
    screen: SearchScreen,
  },
  Collection: {
    screen: CollectionScreen,
  },
  Advertising: {
    screen: AdvertisingScreen,
  },
  Feedback: {
    screen: FeedbackScreen,
  },
  System: {
    screen: SystemScreen,
  },
  Protocol: {
    screen: ProtocolScreen,
  },
  Source: {
    screen: SourceScreen,
  },
});

export default class App extends Component {
  render() {
    return <SimpleApp />;
  }
}

AppRegistry.registerComponent('Hello', () =>
  <View style={{ flex: 1 }}>
    <StatusBar barStyle={'default'} translucent={true} backgroundColor="blue" />
    <App />
  </View>
);
